<script lang="jsx" setup>
import { useRouteQuery } from '@vueuse/router';

const isInput = useRouteQuery('isInput');
const model = defineModel('model', {
  type: Object,
  default: () => ({
    lotNo: null,
    prodNo: null,
    custNo: null,
    machineNo: null,
    image: null
  })
});

const emit = defineEmits(['search']);

function search() {
  emit('search', model.value);
}
</script>

<template>
  <AForm
    :model="model"
    :label-col="{
      span: 5,
      md: 7
    }"
    class="search-form"
  >
    <div class="w-full flex">
      <ARow :gutter="[15, 8]" wrap class="w-full">
        <ACol :span="10">
          <AFormItem label="PNL码" name="lotNo" class="m-0" :label-col="{}">
            <AInput
              v-model:value="model.lotNo"
              allow-clear
              :disabled="!isInput"
              autocomplete="off"
              @keypress.enter="search"
            />
          </AFormItem>
        </ACol>
        <ACol :span="10">
          <AFormItem label="机台号" name="machineNo" class="m-0" :label-col="{}">
            <AInput v-model:value="model.machineNo" placeholder="" allow-clear disabled autocomplete="off" />
          </AFormItem>
        </ACol>
        <ACol :span="4">
          <AButton type="primary" ghost @click="search">
            <template #icon>
              <icon-ic-round-search class="align-sub text-icon" />
            </template>
            <span class="ml-3px">扫码</span>
          </AButton>
        </ACol>
      </ARow>
    </div>
  </AForm>
</template>

<style lang="scss" scoped>
.search-form {
  :deep(.ant-form-item) {
    .ant-form-item-label label {
      font-size: 28px;
    }
  }
}
</style>
